<template>
  <div>
    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <p m="t-0 b-2">员工编号: {{ props.row.id }}</p>
            <p m="t-0 b-2">员工姓名: {{ props.row.name }}</p>
            <p m="t-0 b-2">员工性别: {{ props.row.sex }}</p>
            <p m="t-0 b-2">员工生日: {{ props.row.birthday }}</p>
            <p m="t-0 b-2">员工身份证号: {{ props.row.identity_number }}</p>
            <p m="t-0 b-2">员工部门: {{ GetDptName(props.row.department_id) }}</p>
            <p m="t-0 b-2">员工岗位: {{ GetPosName(props.row.department_id, props.row.position_id) }}</p>
            <p m="t-0 b-2">员工入职时间: {{ props.row.entry_date }}</p>
            <p m="t-0 b-2">员工上岗时间: {{ props.row.work_date }}</p>
            <p m="t-0 b-2">员工类别: {{ props.row.kind }}</p>
            <p m="t-0 b-2">员工来源: {{ props.row.source }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="员工编号" prop="id" />
      <el-table-column label="员工姓名" prop="name" />
      <el-table-column label="操作">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Type to search" style="width: 200px" />
        </template>
        <template #default="scope">
          <el-button size="small" @click="OnOpenUpdatePersonnelWin(scope.$index)">修改</el-button>
          <el-button size="small" type="danger" @click="OnOpenResignationWin(scope.row.id)">离职处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer v-model="drawer2">
      <template #default>
        <h4>员 工 信 息 修 改</h4>
        <div class="content">
          <el-form>
            <el-form-item prop="name">
              <el-input
                v-model="form.updatePersonnel.name"
                placeholder="员工姓名"
                type="text"
                tabindex="4"
                size="large"
              />
            </el-form-item>
            <el-form-item prop="sex">
              <el-input
                v-model="form.updatePersonnel.sex"
                placeholder="员工性别"
                type="text"
                tabindex="5"
                size="large"
              />
            </el-form-item>
            <el-form-item prop="identity_number">
              <el-input
                v-model="form.updatePersonnel.identity_number"
                placeholder="员工身份证号"
                type="text"
                tabindex="5"
                size="large"
              />
            </el-form-item>
            <el-form-item prop="brithday">
              <el-input
                v-model="form.updatePersonnel.birthday"
                placeholder="员工生日"
                type="text"
                tabindex="5"
                size="large"
              />
            </el-form-item>
            <el-form-item prop="kind">
              <el-input
                v-model="form.updatePersonnel.kind"
                placeholder="员工类型"
                type="text"
                tabindex="5"
                size="large"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="OnClickCancelUpdateBtn">取消</el-button>
          <el-button type="primary" @click="OnClickUpdatePersonnelBtn">修改</el-button>
        </div>
      </template>
    </el-drawer>
    <el-drawer v-model="drawer1">
      <template #default>
        <h4>离 职 信 息 登 记</h4>
        <div class="content">
          <el-form :model="form.resignation">
            <el-form-item prop="kind">
              <span class="ml-3 w-35 text-gray-600 inline-flex items-center">离职类型</span>
              <el-select v-model="form.resignation.kind" class="m-2" placeholder="离职类型" size="large">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item prop="be_talent">
              <span class="ml-3 w-35 text-gray-600 inline-flex items-center">是否进入人才库</span>
              <div class="mb-2 flex items-center text-sm">
                <el-radio-group v-model="form.resignation.be_talent" class="ml-4">
                  <el-radio label="true" size="large">是</el-radio>
                  <el-radio label="false" size="large">否</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item prop="resign_data">
              <span class="ml-3 w-35 text-gray-600 inline-flex items-center">离职日期</span>
              <el-date-picker v-model="form.resignation.resign_date" value-format="YYYY-MM-DD" placeholder="离职时间" />
            </el-form-item>
            <el-form-item prop="remark">
              <span class="ml-3 w-35 text-gray-600 inline-flex items-center">离职原因</span>
              <el-input
                v-model="form.resignation.remark"
                placeholder="离职原因"
                type="text"
                tabindex="6"
                size="large"
                autosize
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="OnClickCancelResignationBtn">取消</el-button>
          <el-button type="primary" @click="OnClickResignationBtn">确认</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { getDataset, postData, putData } from "@/api/crud"
import { Department } from "@/models/department"
import { Personnel, UpdatePersonnel } from "@/models/personnel"
import { Position } from "@/models/position"
import { UpsertResignation } from "@/models/resignation"
import { ElMessageBox } from "element-plus"
import { reactive, ref, computed } from "vue"

UpdateData()

const search = ref("")
const filterTableData = computed(() =>
  form.personnels.filter(
    (data: any) =>
      data.is_employed == true &&
      ((!search.value && !form.personnels) ||
        data.name.toLowerCase().includes(search.value.toLowerCase()) ||
        data.identity_number.toLowerCase().includes(search.value.toLowerCase()) ||
        data.kind.toLowerCase().includes(search.value.toLowerCase()) ||
        data.id == search.value)
  )
)

function UpdateData() {
  getDataset<Personnel>("personnels").then((res) => {
    form.personnels = res.data
  })
  getDataset<Department>("departments").then((res: any) => {
    form.departmentForms = res.data
    for (let i = 0, l = form.departmentForms.length; i < l; ++i) {
      getDataset<Position>(`/department/positions/${form.departmentForms[i].id}`).then((re) => {
        form.position[form.departmentForms[i].id] = re.data
      })
    }
  })
}

function GetDptName(index: number) {
  for (let i = 0; i < form.departmentForms.length; ++i) {
    if (form.departmentForms[i].id == index) {
      return form.departmentForms[i].name
    }
  }
}

function GetPosName(id: number, index: number) {
  for (let i = 0; i < form.position[id].length; ++i) {
    if (form.position[id][i].id == index) {
      return form.position[id][i].name
    }
  }
}

const form = reactive({
  personnels: ref<Personnel[]>([]),
  departmentForms: ref<Department[]>([]),
  position: ref<Position[][]>([]),
  resignation: {} as UpsertResignation,
  updatePersonnel: {} as UpdatePersonnel
})

const drawer1 = ref(false)
const drawer2 = ref(false)
let resignId = ""

function OnClickCancelUpdateBtn() {
  drawer2.value = false
}

function OnClickCancelResignationBtn() {
  drawer1.value = false
}

function OnClickResignationBtn() {
  if (form.resignation.be_talent == "true") {
    form.resignation.be_talent = true
  } else {
    form.resignation.be_talent = false
  }
  ElMessageBox.confirm(`是否离职`).then(() => {
    console.log(typeof resignId)
    postData<UpsertResignation>(`resignation/${resignId}`, form.resignation)
    drawer1.value = false
  })
}

function OnOpenResignationWin(id: string) {
  console.log(typeof id)
  resignId = id
  drawer1.value = true
}

function OnOpenUpdatePersonnelWin(index: number) {
  drawer2.value = true
  form.updatePersonnel.id = filterTableData.value[index].id
  form.updatePersonnel.name = filterTableData.value[index].name
  form.updatePersonnel.sex = filterTableData.value[index].sex
  form.updatePersonnel.identity_number = filterTableData.value[index].identity_number
  form.updatePersonnel.birthday = filterTableData.value[index].birthday
  form.updatePersonnel.kind = filterTableData.value[index].kind
}

function OnClickUpdatePersonnelBtn() {
  putData<UpdatePersonnel>("personnel", form.updatePersonnel).then(() => {
    UpdateData()
  })
}

const options = [
  {
    value: "主动辞退",
    label: "主动辞退"
  },
  {
    value: "辞退",
    label: "辞退"
  },
  {
    value: "退休",
    label: "退休"
  },
  {
    value: "开除",
    label: "开除"
  }
]
</script>
